<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>获取天气</title>
</head>
<body>
	<select name="" id="bt0"></select>
	<select name="" id="bt1"></select>
	<h1 id="h0"></h1>
	<h1 id="h1"></h1>
	<br><br>
	<h1 id="h2"></h1>
	<script>
		let bt0=document.getElementById('bt0');
		let bt1=document.getElementById('bt1');
		let h0=document.getElementById('h0');
		let h1=document.getElementById('h1');
		let h2=document.getElementById('h2');
		let XML;
		if (window.XMLHttpRequest) {
			XML=new XMLHttpRequest();
		}else{
			XML=new ActiveXObject("Microsoft.XMLHttpRequest");
		}
		XML.open("get","http://apis.baidu.com/netpopo/weather/city",true);		
		XML.setRequestHeader("apikey","84f53877128c482353fc63eeb4473a60");
		XML.send(null);
		
		XML.onreadystatechange=()=>{
			if (XML.readyState==4&&XML.status==200) {
				let req=XML.responseText;
				let data=JSON.parse(req).result;
				console.log(data)
				// console.log(data)
				let fatherCitys="";
				data.forEach(function(item,index){
					if(index<=34){
						
						fatherCitys+=`<option value="${item.cityid}">${item.city}</option>`;
						
					}
				})
				bt0.innerHTML=fatherCitys;

				(function(){
					let childCitys="";
					let bt0Opts=bt0.getElementsByTagName('option');
					for(let i=0;i<bt0Opts.length;i++){
						if (bt0Opts[i].selected==true) {
							for(let j=34;j<data.length;j++){
								if (data[j].parentid==bt0Opts[i].value) {
									console.log(data[j])
									childCitys+=`<option value="${data[j].citycode}">${data[j].city}</option>`;
								}
							}
						}
					}
					bt1.innerHTML=childCitys;
					var index=bt1.selectedIndex;
					h0.innerHTML=bt1[index].innerHTML;

						let XML;
						var index=bt1.selectedIndex;
						h0.innerHTML=bt1[index].innerHTML;
						if (window.XMLHttpRequest) {
							XML=new XMLHttpRequest();
						}else{
							XML=new ActiveXObject("Microsoft.XMLHttpRequest");
						}
						let bt1Opts=bt1.getElementsByTagName('option');
						XML.open("get","http://apis.baidu.com/netpopo/weather/query/?citycode="+bt1Opts[index].value,true);
						XML.setRequestHeader("apikey","84f53877128c482353fc63eeb4473a60");
						XML.send(null);
						XML.onreadystatechange=function(){
							if (XML.readyState==4&&XML.status==200) {
								let req1=XML.responseText;
								let data=JSON.parse(req1);
								let dayStr=data.result.daily[0].day;
								let nightStr=data.result.daily[0].night;
								console.log(dayStr,nightStr)
								
								let dstr=`日间天气:${dayStr.weather}<br>最高温度:${dayStr.temphigh}<br>img:${dayStr.img}<br>风向:${dayStr.winddirect}<br>风力：${dayStr.windpower}`;
								h1.innerHTML=dstr;
								let nstr=`夜间天气:${nightStr.weather}<br>最低温度:${nightStr.templow}<br>img:${nightStr.img}<br>风向:${nightStr.winddirect}<br>风力：${nightStr.windpower}`;
								h2.innerHTML=nstr;
							}
						}
				})()
				bt0.onchange=function(){
					let childCitys="";
					let bt0Opts=bt0.getElementsByTagName('option');
					for(let i=0;i<bt0Opts.length;i++){
						if (bt0Opts[i].selected==true) {
							for(let j=34;j<data.length;j++){
								if (data[j].parentid==bt0Opts[i].value) {
									console.log(data[j])
									childCitys+=`<option value="${data[j].citycode}">${data[j].city}</option>`;
								}
							}
						}
					}
					bt1.innerHTML=childCitys;
					var index=bt1.selectedIndex;
					h0.innerHTML=bt1[index].innerHTML;

						let XML;
						var index=bt1.selectedIndex;
						h0.innerHTML=bt1[index].innerHTML;
						if (window.XMLHttpRequest) {
							XML=new XMLHttpRequest();
						}else{
							XML=new ActiveXObject("Microsoft.XMLHttpRequest");
						}
						let bt1Opts=bt1.getElementsByTagName('option');
						XML.open("get","http://apis.baidu.com/netpopo/weather/query/?citycode="+bt1Opts[index].value,true);
						XML.setRequestHeader("apikey","84f53877128c482353fc63eeb4473a60");
						XML.send(null);
						XML.onreadystatechange=function(){
							if (XML.readyState==4&&XML.status==200) {
								let req1=XML.responseText;
								let data=JSON.parse(req1);
								let dayStr=data.result.daily[0].day;
								let nightStr=data.result.daily[0].night;
								console.log(dayStr,nightStr)
								
								let dstr=`日间天气:${dayStr.weather}<br>最高温度:${dayStr.temphigh}<br>img:${dayStr.img}<br>风向:${dayStr.winddirect}<br>风力：${dayStr.windpower}`;
								h1.innerHTML=dstr;
								let nstr=`夜间天气:${nightStr.weather}<br>最低温度:${nightStr.templow}<br>img:${nightStr.img}<br>风向:${nightStr.winddirect}<br>风力：${nightStr.windpower}`;
								h2.innerHTML=nstr;
							}
						}
				}
				bt1.onchange=function(){
					let XML;
					var index=bt1.selectedIndex;
					h0.innerHTML=bt1[index].innerHTML;
					if (window.XMLHttpRequest) {
						XML=new XMLHttpRequest();
					}else{
						XML=new ActiveXObject("Microsoft.XMLHttpRequest");
					}
					let bt1Opts=bt1.getElementsByTagName('option');
					XML.open("get","http://apis.baidu.com/netpopo/weather/query/?citycode="+bt1Opts[index].value,true);
					XML.setRequestHeader("apikey","84f53877128c482353fc63eeb4473a60");
					XML.send(null);
					XML.onreadystatechange=function(){
						if (XML.readyState==4&&XML.status==200) {
							let req1=XML.responseText;
							let data=JSON.parse(req1);
							let dayStr=data.result.daily[0].day;
							let nightStr=data.result.daily[0].night;
							console.log(dayStr,nightStr)
							
							let dstr=`日间天气:${dayStr.weather}<br>最高温度:${dayStr.temphigh}<br>img:${dayStr.img}<br>风向:${dayStr.winddirect}<br>风力：${dayStr.windpower}`;
							h1.innerHTML=dstr;
							let nstr=`夜间天气:${nightStr.weather}<br>最低温度:${nightStr.templow}<br>img:${nightStr.img}<br>风向:${nightStr.winddirect}<br>风力：${nightStr.windpower}`;
							h2.innerHTML=nstr;
						}
					}
				}
			}
		}
		
		
	</script>
</body>
</html>